<template>
    <div class="product">
        <el-button type="primary" @click="addStu">增加项目</el-button>
        <el-button plain icon="iconfont icon-excel" @click="exportExcel">
            导出excel
        </el-button>
        <Dialog ref="stuDialog" :visible="visible" @ok="ok" @cancel="cancel"></Dialog>
        <!-- 表格 -->
        <template>
            <el-table v-loading="loading" :data="stuData" border style="width: 100%">
                <el-table-column label="头像" align="center">
                    <template v-slot="{ row: { headimgurl } }">
                        <el-avatar size="large" shape="square"
                            :src="headimgurl ? headimgurl : 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'">
                        </el-avatar>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="姓名" align="center">
                </el-table-column>
                <el-table-column prop="age" label="年龄" align="center">
                </el-table-column>
                <el-table-column align="center" prop="degree" label="学历">
                </el-table-column>
                <el-table-column width="300" align="center" prop="productUrl" label="项目">
                </el-table-column>
                <el-table-column align="center" prop="cTime" label="创建时间">
                </el-table-column>
                <el-table-column label="操作" align="center" width="300">
                    <template v-slot="{ row }">
                        <el-button type="primary" size="mini" icon="el-icon-view">查看</el-button>
                        <el-button type="primary" size="mini" icon="el-icon-edit" @click="edit(row)">编辑</el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="delStu(row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination hide-on-single-page @current-change="pageChange" :pageSize="pageSize" background
                layout="prev, pager, next" :total="total">
            </el-pagination>
        </template>
    </div>
</template>
<script>
import Dialog from "@/components/Dialog"
import * as api from "@/api/stu"
// import qee from "qf-export-excel"
export default {
    data() {
        return {
            visible: false,
            stuData: [],
            loading: false,
            total: 0,
            pageSize: 0
        }
    },
    meta: {
        title: "xyxmgl",
        name: "项目管理",
        icon: "iconfont icon-shangpinguanli"
    },
    components: {
        Dialog
    },
    created() {
        //获取表格数据
        this.getStuList()
    },
    methods: {
        //导出excel
        exportExcel() {
            //导出的字段有哪些
            let titleList = [{
                title: '头像地址',
                key: 'headimgurl'
            }, {
                title: '名字',
                key: 'name'
            }, {
                title: '项目',
                key: 'productUrl'
            }]

            qee(titleList, this.stuData, '2205项目')

        },
        addStu() {
            //清空dialog中的数据
            this.$refs.stuDialog.stuForm = {};
            this.$refs.stuDialog.title = '增加学员信息'
            this.visible = true
        },
        //编辑
        edit(row) {
            console.log(row)
            // console.log(this.$refs.stuDialog)
            //数据回显
            this.$refs.stuDialog.stuForm = { ...row };
            this.$refs.stuDialog.title = '编辑学员信息'
            this.visible = true;
        },
        //删除学员信息
        delStu(row) {
            this.$confirm('该操作将永久删除数据,是否继续?', '删除提示')
                .then(() => {
                    api.deleteStu(row.sId)
                        .then(res => {
                            if (res.data.state) {
                                this.$message.success('删除成功')
                                this.getStuList()
                            }
                        })
                })
                .catch(() => {
                    this.$message.error('已取消删除')
                })
        },
        //页码改变的时候
        pageChange(pageSize) {
            this.getStuList(undefined, pageSize)
        },
        //获取学员列表数据的方法
        getStuList(count = 8, page = 1, classes) {
            this.loading = true;
            api.getStuListApi(count, page, classes)
                .then(res => {
                    console.log(res)
                    if (res.data.state) {
                        this.stuData = res.data.data;
                        this.total = res.data.total;
                        this.pageSize = count;
                        this.loading = false
                    }
                })
        },

        //点击了dialog确定按钮
        ok(formData) {
            console.log('dialogOpen')

            let dialogTitle = this.$refs.stuDialog.title;

            if (dialogTitle === '增加学员信息') {
                // console.log(formData)
                api.addStu(formData)
                    .then(res => {
                        console.log(res)
                        if (res.data.state) {
                            //添加成功

                            //更新列表
                        }
                    })
            } else if (dialogTitle === '编辑学员信息') {
                //发送编辑请求
                api.editStuApi(formData)
                    .then(res => {
                        console.log(res)
                        if (res.data.state) {
                            this.getStuList()
                            this.$message.success('更新成功')
                        }
                    })
            }


            this.visible = false
        },
        //点击了dialog的取消按钮
        cancel() {
            console.log('dialogClose')
            this.visible = false
        }
    }
}
</script> 